<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <div>
                        <div class="text-center">
                            <userAvatar :user="state.user"/>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <svg-icon icon-class="user"/>
                                用户名称
                                <div class="pull-right">{{ state.user.login_name }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="phone"/>
                                手机号码
                                <div class="pull-right">{{ state.user.mobile }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="email"/>
                                用户邮箱
                                <div class="pull-right">{{ state.user.email }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="peoples"/>
                                所属部门
                                <div v-if="adminInfo" class="pull-right">{{ state.officeGroup }} / {{adminInfo.job}}</div>
                                <div v-if="doctorInfo" class="pull-right">{{ state.officeGroup }} / {{doctorInfo.job}}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="peoples"/>
                                所属角色
                                <div class="pull-right">{{ state.roleGroup }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="date"/>
                                创建日期
                                <div class="pull-right">{{ state.user.createTime }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18" :xs="24">
                <el-card>
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>基本资料</span>
                        </div>
                    </template>
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="基本资料" name="userinfo">
                            <userInfo :user="state.user" :adminInfo="adminInfo" :doctorInfo="doctorInfo"/>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <resetPwd/>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="Profile">
    import userAvatar from "./userAvatar";
    import userInfo from "./userInfo";
    import resetPwd from "./resetPwd";
    import {getUserProfile} from "@/api/system/user";

    const activeTab = ref("userinfo");
    const state = reactive({
        user: {},
        roleGroup: {},
        officeGroup: {},
    });

    const adminInfo = ref({});
    const doctorInfo= ref({});

    function getUser() {
        getUserProfile().then(response => {
            state.user = response.data;
            state.roleGroup = response.roleGroup;
            state.officeGroup = response.officeGroup;
            adminInfo.value = response.data.sysAdmininfo;
            doctorInfo.value = response.data.sysDoctorinfo;
        });
    };

    getUser();

</script>
